<template>
	<view>
		<scroll-view>
			<cu-custom bgColor="bg-blue" :isBack="true">
				<block slot="content">油价查询</block>
			</cu-custom>
			<!-- 轮播 -->
			<swiper class="screen-swiper square-dot" :indicator-dots="true" :circular="true" :autoplay="true"
				interval="5000" duration="500" :style="[{animation: 'show 0.2s 1'}]">
				<swiper-item v-for="(item,index) in swiperList" :key="index">
					<image :src="item.url" mode="aspectFill" v-if="item.type=='image'"></image>
					<video :src="item.url" autoplay loop muted :show-play-btn="false" :controls="false"
						objectFit="cover" v-if="item.type=='video'"></video>
				</swiper-item>
			</swiper>
			<view style="background: linear-gradient(to bottom, #0081ff, #cce6ff);">
				<view class="text-white" style="text-align: center;font-size: 20px;padding: 20rpx 0rpx 80rpx 0rpx;">
					<view>
						<view @click="cityClick()">
							<text class='cuIcon-locationfill'></text>{{city}}
						</view>
						<uni-data-picker placeholder="请选择班级" popup-title="请选择所在地区" :localdata="xzqhList" ref="picker"
							 @popupclosed="onpopupclosed" @change="onchange"
							:style="pickerFlg?'display:none':'dispaly:block'">
						</uni-data-picker>
					</view>
					<view class="text-blue bg-white"
						style="margin: 40rpx 100rpx 0rpx 100rpx;padding: 10rpx 0rpx 40rpx 0rpx;border-radius: 30rpx;">
						<uni-row class="mt10 mb10">
							<uni-col :span="12">
								<view>92号汽油</view>
							</uni-col>
							<uni-col :span="10" class="text-right">
								<view>{{num92}}&nbsp;元&nbsp;/&nbsp;L</view>
							</uni-col>
							<uni-col :span="2">
								<view></view>
							</uni-col>
						</uni-row>
						<uni-row class="mt10 mb10">
							<uni-col :span="12">
								<view>95号汽油</view>
							</uni-col>
							<uni-col :span="10" class="text-right">
								<view>{{num95}}&nbsp;元&nbsp;/&nbsp;L</view>
							</uni-col>
							<uni-col :span="2">
								<view></view>
							</uni-col>
						</uni-row>
						<uni-row class="mt10 mb10">
							<uni-col :span="12">
								<view>98号汽油</view>
							</uni-col>
							<uni-col :span="10" class="text-right">
								<view>{{num98}}&nbsp;元&nbsp;/&nbsp;L</view>
							</uni-col>
							<uni-col :span="2">
								<view></view>
							</uni-col>
						</uni-row>
						<uni-row class="mt10">
							<uni-col :span="12">
								<view>0号汽油</view>
							</uni-col>
							<uni-col :span="10" class="text-right">
								<view>{{num0}}&nbsp;元&nbsp;/&nbsp;L</view>
							</uni-col>
							<uni-col :span="2">
								<view></view>
							</uni-col>
						</uni-row>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import liveVueApi from '@/api/liveVueApi.js';
	export default {
		data() {
			return {
				swiperList: [{
						id: 1,
						type: 'image',
						url: '/static/banner/banner1.png',
						link: ''
					},
					{
						id: 2,
						type: 'image',
						url: '/static/banner/banner2.jpg',
						link: ''
					},
					{
						id: 3,
						type: 'image',
						url: '/static/banner/banner3.jpg',
						link: ''
					},
					{
						id: 4,
						type: 'image',
						url: '/static/banner/banner4.jpg',
						link: ''
					},
				],
				city: '武汉',
				num92: 0,
				num95: 0,
				num98: 7.12,
				num0: 0,
				xzqhList: [],
				pickerFlg: true
			}
		},
		onLoad() {
			liveVueApi.oilPrice({prov:'420000'}).then((res)=>{
				this.num92 = res.data.result.result.p92
				this.num95 = res.data.result.result.p95
				this.num98 = res.data.result.result.p98
				this.num0 = res.data.result.result.p0
			})
			let params = {
				'xzqhId': '100000'
			}
			liveVueApi.getXzqhList(params).then((res) => {
				if (res.data.code == 200) {
					this.xzqhList = res.data.result
				} else {
					resolve(response)
				}
			})
		},
		methods: {
			cityClick() {
				this.pickerFlg = false
				this.$refs.picker.show()
			},
			onpopupclosed() {
				this.pickerFlg = true
			},
			onchange(e) {
				console.log('onchange:', e);
				this.city = e.detail.value[1].text;
				liveVueApi.oilPrice({prov:e.detail.value[0].value}).then((res)=>{
					this.num92 = res.data.result.result.p92
					this.num95 = res.data.result.result.p95
					this.num98 = res.data.result.result.p98
					this.num0 = res.data.result.result.p0
				})
			}
		}
	}
</script>

<style>
	.mt10 {
		margin-top: 40rpx;
	}

	.mb10 {
		margin-bottom: 40rpx;
	}

	.text-right {
		text-align: right;
	}

	/deep/.selected-item {
		color: black;
	}

	/deep/.item {
		text-align: left;
	}
</style>
